import {Outlet, useLocation} from 'react-router-dom'
import Header from '../../components/header'
import './entry.styl'
import { useSelector} from 'react-redux'
//获取Ant Design的主题、
import {Breadcrumb, ConfigProvider, Layout, theme} from 'antd'
import SideBar from "../../components/sideBar";
import {useState} from "react";
const { Sider, Content } = Layout;
//darkAlgorithm为暗色主题，defaultAlgorithm为亮色（默认）主题
const {darkAlgorithm, defaultAlgorithm} = theme;

function Entry() {
    const mate = useLocation();
    //获取store中theme的状态
    const globalTheme = useSelector((state) => state.theme);
    const  antdTheme = {
        algorithm: globalTheme.dark ? darkAlgorithm : defaultAlgorithm,
    }
    //获取自定义的颜色
    const customColor = globalTheme.colorPrimary || "";
    //如果自定义的颜色存在，就将其设置为主题色示例
    if (customColor){
        antdTheme.token = {
            colorPrimary: customColor,
        }
    }
    const siderStyle = {
        width: '100%',
        height: '100%',
        minWidth: '120px',
        maxWidth: '20%',
        background: globalTheme.dark ? '#1d1d1d': '#fafafa',
    }
    const BreadcrumbStyle = {
        height: '48px',
        display: 'flex',
        alignItems: 'center',
        padding: '0 8px',
        background: globalTheme.dark ? '#141414': '#fafafa',
    }
    const [content, setContent] = useState({})
    const getSideFun = (val) => {
        setContent(val)
        console.log("接受到数据:",val)
    }
    return (
        <ConfigProvider theme={antdTheme}>
        <div className="box-body">
            <Header title={mate.pathname} />
            <Layout>
                <Sider width="20%" style={siderStyle}>
                    <SideBar onSideFun={getSideFun}></SideBar>
                </Sider>
                <Content  className='content h-full'>
                    <Breadcrumb
                        items={[
                            { title: '首页' },
                            { title: '当前页面' },
                        ]}
                        style={BreadcrumbStyle}
                    />
                   <div className='outlet'>
                       <Outlet context={{content}} />
                   </div>
                </Content>
            </Layout>
        </div>
        </ConfigProvider>
    )
}
export default Entry